<template>
  <view class="box-card-body">
    <view id="detailOrderChart" class="chart"></view>
  </view>
</template>

<script>
var vk = uni.vk;
import * as echarts from "echarts";

export default {
  name: "detailOrderChart",
  methods: {
    async init(time) {
      const res = await vk.callFunction({
        url: "admin/business/kh.stats.detailOrderChart",
        data: { time },
      });
      let xList = [];
      let yList = []; //商品支付金额
      let yList2 = []; //充值金额
      let yList3 = []; //营业额
      let yList4 = []; //支出金额
      let yList5 = []; //交易毛利

      res.list.forEach((item) => {
        xList.push(item.text);
        yList.push(item.value);
      });
      res.list2.forEach((item) => {
        yList2.push(item.value);
      });
      res.list3.forEach((item) => {
        yList3.push(item.value);
      });
      res.list4.forEach((item) => {
        yList4.push(item.value);
      });
      res.list5.forEach((item) => {
        yList5.push(item.value);
      });
      // 渲染图表
      let myChart = echarts.getInstanceByDom(
        document.getElementById("detailOrderChart")
      );
      if (myChart == null) {
        // 如果不存在，就进行初始化。
        myChart = echarts.init(document.getElementById("detailOrderChart"));
      }

      //营业额字端
      let turnover = "营业额";
      //交易毛利金额
      let grossProfit = "交易毛利金额";
      //商品支付金额
      let goodsPay = "商品支付金额";
      //充值金额
      let recharge = "充值金额";
      //支出金额
      let expenditure = "支出金额";

      let option = {
        title: {
          show: false,
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: [turnover, grossProfit, goodsPay, recharge, expenditure],
        },
        backgroundColor: "#ffffff",
        grid: {
          left: "1%",
          right: "1%",
          top: "15%",
          bottom: "1%",
          containLabel: true,
        },
        tooltip: { trigger: "axis" },
        xAxis: [
          {
            type: "category",
            axisLabel: { color: "#9a9a9a", interval: 0, rotate: 40 },
            axisLine: { show: true, lineStyle: { color: "#397cbc" } },
            axisTick: { show: false },
            data: xList,
          },
        ],
        yAxis: [
          {
            name: `金额`,
            type: "value",
            // axisLine: { show: true, lineStyle: { color: "#dfdfdf" } },
            axisTick: { show: false },
            splitLine: {
              show: true,
              lineStyle: { type: "dashed", color: "#f4f4f4" },
            },
          }
        ],
        series: [
          {
            name: turnover,
            type: "line",
            symbol: "circle",
            smooth: true,
            // itemStyle: {
            //   normal: {
            //     color: "#00a0a6",
            //     lineStyle: { color: "#00a0a6", width: 1 },
            //     areaStyle: { color: "#b2e2e4" },
            //   },
            // },
            itemStyle: {
              color: "#b37feb",
            },
            data: yList3,
          },
          {
            name: grossProfit,
            type: "line",
            symbol: "circle",
            smooth: true,
            // itemStyle: {
            //   normal: {
            //     color: "#00a0a6",
            //     lineStyle: { color: "#00a0a6", width: 1 },
            //     areaStyle: { color: "#b2e2e4" },
            //   },
            // },
            itemStyle: {
              color: "#ffab2b",
            },
            data: yList5,
          },
          {
            name: goodsPay,
            type: "line",
            symbol: "circle",
            smooth: true,
            // itemStyle: {
            //   normal: {
            //     color: "#00a0a6",
            //     lineStyle: { color: "#00a0a6", width: 1 },
            //     areaStyle: { color: "#b2e2e4" },
            //   },
            // },
            itemStyle: {
              color: "#ff4d4f",
            },
            data: yList,
          },
          {
            name: recharge,
            type: "line",
            symbol: "circle",
            smooth: true,
            // itemStyle: {
            //   normal: {
            //     color: "#00a0a6",
            //     lineStyle: { color: "#00a0a6", width: 1 },
            //     areaStyle: { color: "#b2e2e4" },
            //   },
            // },
            itemStyle: {
              color: "#52c41a",
            },
            data: yList2,
          },
          {
            name: expenditure,
            type: "line",
            symbol: "circle",
            smooth: true,
            // itemStyle: {
            //   normal: {
            //     color: "#00a0a6",
            //     lineStyle: { color: "#00a0a6", width: 1 },
            //     areaStyle: { color: "#b2e2e4" },
            //   },
            // },
            itemStyle: {
              color: "#1890ff",
            },
            data: yList4,
          },
        ],
      };
      myChart.setOption(option);
      this.$emit("comp");
    },
  },
};
</script>

<style lang="scss" scoped>
.box-card-body {
  background-color: #fff;
  border-radius: 0 0 10px 10px;
  margin-bottom: 20px;
  padding: 4px 0 20px;
  height: 360px;
  .chart {
    width: 100%;
    height: 100%;
  }
}
</style>
